<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <!-- 搜索 -->
      <el-select v-model="query.clusterId" clearable size="small" placeholder="选择集群搜索" class="filter-item">
        <el-option v-for="item in clusterLists" :key="item.key" :label="item.value" :value="item.key"/>
      </el-select>
      <el-input
        v-model="query.fileName"
        clearable
        size="small"
        placeholder="文件名称"
        style="width:200px"
        class="filter-item"
      />
      <el-select v-model="query.publishType" clearable size="small" placeholder="选择脚本类型" class="filter-item">
        <el-option v-for="item in publishType" :key="item.key" :label="item.value" :value="item.key"/>
      </el-select>
      <el-select v-model="query.state" clearable size="small" placeholder="选择状态搜索" class="filter-item">
        <el-option v-for="item in publishState" :key="item.key" :label="item.value" :value="item.key"/>
      </el-select>
      <rrOperation :crud="crud"/>
    </div>
    <!--表格渲染-->
    <el-table
      ref="table"
      v-loading="crud.loading"
      :data="crud.data"
      border
      max-height="350px"
      @select="crud.selectChange"
      @select-all="crud.selectAllChange"
      @selection-change="crud.selectionChangeHandler"
    >
      <el-table-column label="目标集群" prop="clusterName"/>
      <el-table-column label="脚本类型" prop="publishType">
        <template slot-scope="scope">
          <el-tag size="small" v-if="scope.row.publishType==='period'">周期</el-tag>
          <el-tag size="small" v-if="scope.row.publishType==='service'">推送下载稽核</el-tag>
          <el-tag size="small" v-if="scope.row.publishType==='init'">初始化</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="文件名" prop="fileName"/>
      <el-table-column label="发布状态" prop="state">
        <template slot-scope="scope">
          <el-tag size="small" v-if="scope.row.state==='UNPUBLISHED'">未发布</el-tag>
          <el-tag size="small" type="warning" v-if="scope.row.state==='PUBLISHING'">发布中</el-tag>
          <el-tag size="small" type="success" v-if="scope.row.state==='PUBLISHED'">已发布</el-tag>
          <el-tag size="small" type="danger" v-if="scope.row.state==='PUBLISHFAIL'">发布失败</el-tag>
          <el-tag size="small" type="warning" v-if="scope.row.state==='RESTORING'">还原中</el-tag>
          <el-tag size="small" type="info" v-if="scope.row.state==='RESTORED'">已还原</el-tag>
          <el-tag size="small" type="danger" v-if="scope.row.state==='RESTOREFAIL'">还原失败</el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <el-button type="text" @click="toShowErrorMessage(scope.row)">详细信息</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style=" float: right;">
      <!--分页组件-->
      <pagination />
    </div>

    <el-dialog
      :close-on-click-modal="false"
      title="详细信息"
      :visible.sync="showErrorMessageVisible"
      width="90%"
      append-to-body="true"
      top="5vh"
      :before-close="handleClose">
      <codemirror ref="codemirror" :value="errorMessage" :editorHeight="500"/>
    </el-dialog>
  </div>
</template>

<script>
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import pagination from '@crud/Pagination'
import clusterSparingApi from '@/api/cluster/clusterSparing'
import scriptPublishListApi from '@/api/script/publish/scriptPublishList'
import scanDetail from '@/views/scriptPublish/scanDetail/index'
import codemirror from '@/components/codemirror/codemirror'

// crud交由presenter持有
const defaultCrud = CRUD({ title: '脚本扫描确认清单', url: 'api/scriptPublish/list/page', crudMethod: { ...scriptPublishListApi }})
const defaultForm = {}
export default {
  name: 'ScriptPublishList',
  components: { rrOperation, pagination, scanDetail, codemirror },
  props: {
    publishTaskId: {
      type: String,
      default: null
    }
  },
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
  data() {
    return {
      clusterLists: [],
      scanListId: null,
      errorMessage: null,
      showErrorMessageVisible: false,
      publishType: [
        { key: 'init', value: '初始化'},
        { key: 'service', value: '推送下载稽核'},
        { key: 'period', value: '周期'}
      ],
      publishState: [
        { key: 'UNPUBLISHED', value: '未发布' },
        { key: 'PUBLISHING', value: '发布中' },
        { key: 'PUBLISHED', value: '已发布' },
        { key: 'PUBLISHFAIL', value: '发布失败' },
        { key: 'RESTORING', value: '还原中' },
        { key: 'RESTORED', value: '已还原' },
        { key: 'RESTOREFAIL', value: '还原失败' }
      ]
    }
  },
  created() {
    this.initData()
  },
  methods: {
    [CRUD.HOOK.beforeRefresh](crud) {
      crud.query.scriptPublishTaskId = this.publishTaskId
    },
    initData() {
      this.crud.resetQuery(true)
      clusterSparingApi.findListByPage().then(res => {
        res.records.forEach((array) => {
          this.clusterLists.push({ key: array.id, value: array.clusterName })
        })
      })
    },
    // 显示详细信息
    toShowErrorMessage(row) {
      this.showErrorMessageVisible = true
      if (row.errorMessage !== undefined && row.errorMessage !== null && row.errorMessage !== '') {
        this.errorMessage = row.errorMessage
      } else {
        this.errorMessage = '--无任务详细信息--'
      }
    },
    handleClose() {
      this.showErrorMessageVisible = false
    }
  }
}
</script>
<style scoped>

</style>
